<template>
  <view>
    <view class="card">
      <text class="title_text">{{ left }}</text>
      <button 
        v-if="showReload"
        class="button_change"
        :loading="reloading" 
        type="primary"
        :plain="true"
        size="mini"
        @click="click"
      >
        换一换
      </button>
      <text class="text_showmore" @click="clickMore">查看更多 ></text>
    </view>
    <slot />
  </view>
</template>

<script>
export default {
  props: {
    left: {
      type: String,
      default: ''
    },
    reloading: {
      type: Boolean,
      default: false
    },
    showReload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      contentText: {
        contentdown: '查看更多',
        contentrefresh: ' ',
        contentnomore: '没有更多'
      }
    }
  },
  methods: {
    click(e) {
      this.$emit('reload', e)
    },
    clickMore(e) {
      this.$emit('showMore', e)
    }
  }
}
</script>

<style lang="scss" scoped>
	.card{
		height: 20px;
		line-height: 18px;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 20px;
		position: relative;
		.title_text{
			height: 100%;
			float: left;
			font-weight: bold;
			font-size: 15px;
		}
		.button_change{
			font-size: 12px;
			color: #4c89ea;
			float: left;
			line-height: 18px;
			border: 0;
		}
		.text_showmore{
			font-size: 12px;
			color: gray;
			float: right;
		}
	}
</style>
